<template>
  <div class="sign">
    <div class="box">
      <div class="wrapper">
        <div class="banner">
          <el-image style="width: 100%; max-height: 240px" :src="qnPath(info.image)" fit="fill" lazy>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
          <h2>{{ info.name }}</h2>
        </div>
        <div class="basic-info">
          <p v-if="info.type === '02200001'">活动类型：<span>折扣-{{ info.disCount }}折</span></p>
          <p>报名时间：<span>{{ new Date(info.signStartDate) | getDate }}至{{ new Date(info.signEndDate) | getDate }}</span></p>
          <p>活动时间：<span>{{ new Date(info.beginDate) | getDate }}至{{ new Date(info.finishDate) | getDate }}</span></p>
        </div>
      </div>
      <el-divider />
      <div class="wrapper">
        <h3>报名要求</h3>
        <div class="requirements">
          <p>招募对象：<span>{{ info.target }}</span></p>
          <p>报名商品类型：<span>{{ info.mdseType }}</span></p>
          <p>库存要求：<span>报名商品库存不得低于{{ info.stock }}件</span></p>
        </div>
      </div>
      <el-divider />
      <div class="wrapper">
        <h3>活动规则</h3>
        <div class="rule" v-html="info.rule" />
      </div>
      <el-divider />
      <div class="wrapper">
        <h3>参与报名</h3>
        <div class="feedback">
          <p class="sign-staus">参与状态：<span>{{ info.sign === '0' ? '未报名' : info.sign === '1' ? '审核中' : info.sign === '2' ? '报名成功' : '审核未通过' }}</span></p>
          <p v-if="info.sign === '3'">未通过原因：<span>{{ detail.refusalCause }}</span></p>
          <p v-if="info.sign === '3'">反馈时间：<span>{{ new Date(detail.updateDate) | getDate }}</span></p>
        </div>
        <div v-if="info.sign === '0' || info.sign === '3'" class="choose-btn"><span>选择参与活动的商品：</span><el-button type="primary" icon="el-icon-plus" size="medium" plain @click="dialogPdtsVisible = true"><span v-if="info.sign === '0'">添加活动商品</span><span v-if="info.sign === '3'">调整活动商品</span></el-button></div>
        <table v-if="selectedPdts.length > 0" class="pdts-selected-table" align="left" border="0" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>商品名称</th>
              <th>分类</th>
              <th>原价</th>
              <th>活动价</th>
              <th>库存</th>
              <th>销量</th>
              <th v-if="info.sign === '0' || info.sign === '3'">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(pdt, index) in selectedPdts" :key="pdt.id">
              <td>{{ (index + 1) | addZeroPrefix }}</td>
              <td>
                <div>
                  <p class="img"><el-image style="width: 80px; height: 80px" :src="qnPath(pdt.image)" fit="fit" /></p>
                  <div class="info">
                    <p class="name">{{ pdt.name }}</p>
                    <p class="id">ID：{{ pdt.id }}</p>
                  </div>
                </div>
              </td>
              <td>{{ pdt.typeValue }}</td>
              <td>{{ pdt.unitPrice | fixedPrice }}</td>
              <td class="price-red">{{ pdt.unitPrice * info.disCount / 10 | fixedPrice }}</td>
              <td>{{ pdt.amount }}</td>
              <td>{{ pdt.sales }}</td>
              <td v-if="info.sign === '0' || info.sign === '3'"><el-link type="danger" :underline="false" @click="deleteSinglePdt(pdt)">删除</el-link></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="wrapper">
        <div class="btns">
          <el-button @click="goBack">返 回</el-button>
          <el-button v-if="info.sign === '0'" type="primary" @click="toSign">立即报名</el-button>
          <el-button v-if="info.sign === '3'" type="primary" @click="reSubmit">重新提交</el-button>
        </div>
      </div>
    </div>
    <!-- 商品弹框 -->
    <template>
      <DialogPdts :dialogpdtsvisible="dialogPdtsVisible" :selectedlist="selectedPdts" :shopid="shopInfo.id" @ok="getSelectedPdts" @goBack="dialogPdtsVisible = false" />
    </template>
  </div>
</template>
<script>
import DialogPdts from '../components/DialogPdts';
import { mapGetters } from 'vuex';
import { adminAcDetail, sign, reSign, delpdts } from '@/api/activity';
export default {
  name: 'ActivitySign',
  components: {
    DialogPdts
  },
  data() {
    return {
      id: '',
      info: {},
      dialogPdtsVisible: false,
      selectedPdts: [],
      selectedPdtsIdBAK: [], // 备份
      detail: {}
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  mounted() {
    this.getInfo();
  },
  activated() {
    // this.getInfo();
  },
  methods: {
    getInfo() {
      const shopId = this.shopInfo.id;
      const id = this.$route.params.id;
      new Promise((resolve, reject) => {
        adminAcDetail({ id, shopId }).then(res => {
          const pdtsList = res.data.target;
          this.info = res.data.activity;
          this.detail = res.data.detail;
          pdtsList.forEach(pdt => {
            this.selectedPdtsIdBAK.push(pdt.id);
          });
          this.selectedPdts = pdtsList;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    getSelectedPdts(list) {
      this.selectedPdts = list;
      this.dialogPdtsVisible = false;
    },
    // 删除已经选中的活动商品
    deleteSinglePdt(pdt) {
      new Promise((resolve, reject) => {
        if (pdt.mdseId) {
          delpdts({ id: pdt.mdseId }).then(res => {
            this.selectedPdts.splice(this.selectedPdts.indexOf(pdt), 1);
            this.selectedPdtsIdBAK.splice(this.selectedPdtsIdBAK.indexOf(pdt.id), 1);
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        } else {
          this.selectedPdts.splice(this.selectedPdts.indexOf(pdt), 1);
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    toSign() {
      if (this.selectedPdts.length === 0) {
        this.$message({
          type: 'error',
          message: '请先添加参与活动的商品'
        });
        return;
      }
      // {activityId:'活动id','shopId':'店铺id','mdseId': '商品id，用/分隔'}
      const shopId = this.shopInfo.id;
      const activityId = this.info.id;
      const mdseId = this.selectedPdts.map(pdt => {
        return pdt.id;
      }).join('/');
      new Promise((resolve, reject) => {
        sign({ shopId, activityId, mdseId }).then(res => {
          console.log(res);
          this.$message({
            type: 'success',
            message: '报名成功',
            duration: '1000',
            onClose: () => {
              this.getInfo();
            }
          });
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    reSubmit() { // 审核未通过时重新提交
      const arr = []; // 已经选中的商品ID

      this.selectedPdts.forEach(pdt => {
        arr.push(pdt.id);
      });
      // eslint-disable-next-line no-undef
      const arr2 = _.difference(arr, this.selectedPdtsIdBAK); // 全新的商品ID
      const activityDetailsId = this.detail.id;
      const shopId = this.shopInfo.id;
      const mdseId = arr2.join('/');
      new Promise((resolve, reject) => {
        reSign({ shopId, activityDetailsId, mdseId }).then(res => {
          this.$message({
            type: 'success',
            message: '重新提交成功',
            duration: '1000',
            onClose: () => {
              this.getInfo();
            }
          });
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.sign {
  font-size: $fontSizeBase;
	background-color: #fff;
  color:$textColorDark;
  padding: 50px 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  p{
    margin: 0;
    padding: 0;
  }
  .wrapper{
    padding: 0 30px;
  }
  .box{
    max-width: 1200px;
  }
  h2,h3{
    font-weight: normal;
    margin: 0;
  }
  h2{
    height: 46px;
    font-size: $fontSizeLg;
    text-align: center;
    line-height: 46px;
    background-color: #F6F8F9;
  }
  h3{
    font-weight: bolder;
    font-size: $fontSizeLg;
    display: flex;
    align-items: center;
    margin-bottom: 36px;
    &::before{
      content: "";
      display: inline-block;
      width: 5px;
      height: 12px;
      background: url('../../../assets/images/iconbg-nav.png') no-repeat center;
      background-size: cover;
      margin-right: 8px;
      vertical-align: middle;
    }
  }
  .basic-info,.requirements,.feedback{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 36px;
    span{
      font-weight: bolder;
    }
  }
  .feedback{
    padding-left: 4%;
    margin-bottom: 20px;
    justify-content: space-between;
  }
  .sign-staus{
    span{
      color: #F7563A;
    }
  }
  .rule{
    line-height: 1.6;
    padding-left: 4%;
  }
  .choose-btn,.pdts-selected-table{
    padding-left: 4%;
  }
  .btns{
    margin-top: 36px;
    text-align: center;
  }
}
.pdts-selected-table {
  margin-top: 25px;
  max-width: 1000px;
  float: none;
  th,
  td {
    text-align: center;
    width: 10%;
    color: $textColorDark;
    font-size: $fontSizeBase;
    line-height: 1.58;
    &:first-child{
      width: 60px;
      border-left: 1px solid $disabledColor;
    }
    &:nth-child(2) {
      text-align: left;
      width: 38%;
    }
    &:last-child{
      width: 100px;
    }
  }

  th {
    height: 50px;
    line-height: 50px;
    background-color: #F9FBFC;
    border-top: 1px solid $disabledColor;
    border-bottom: 1px solid $disabledColor;

    &:nth-child(2){
      padding-left: 20px;
    }
    &:last-child {
      border-right: 1px solid $disabledColor;
    }
  }

  td {
    background-color: #fff;
    border-right: 1px solid $disabledColor;
    border-bottom: 1px solid $disabledColor;
    padding: 15px;

    &:nth-child(2) {

      &>div {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;

        .info {
          margin-left: 20px;
        }

        .id {
          color: $textColorBase;
          margin-top: 10px;
        }

        .name {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
    &.price-red{
      color: $errorColor;
    }
  }
}
</style>
